import {Component, ElementRef, Input, OnDestroy, OnInit, TemplateRef, ViewChild} from '@angular/core';
import {List} from '../../../../../domain/entities';
import {ListService} from '../../../../services/list/list.service';
import {
  NzContextMenuService,
  NzDropdownContextComponent,
  NzDropdownService,
  NzMenuDropdownService,
  NzMessageService,
  NzModalService
} from 'ng-zorro-antd';
import {Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
import {TodoService} from '../../../../services/todo/todo.service';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html'
})
export class ListComponent implements OnInit, OnDestroy {
  @Input() isCollapsed: boolean;
  @ViewChild('listInput', null) listInput: ElementRef;
  @ViewChild('listRenameInput', null) listRenameInput: ElementRef;

  lists: List[];
  currentListUuid: string; // 当前选中列表UUID
  contextListUuid: string; // 上下文菜单列表UUID
  addListModalVisible = false;
  renameListModalVisible = false;

  private dropdown: NzDropdownContextComponent; // 右键下拉组件
  private destroy$ = new Subject();

  constructor(
    private dropdownService: NzDropdownService, // 下拉菜单服务
    private listService: ListService,
    private todoService: TodoService,
    private message: NzMessageService,
    private modal: NzModalService,
  ) {
  }

  ngOnInit() {
    // 订阅
    this.listService.lists$
      .pipe(takeUntil(this.destroy$))
      .subscribe((lists) => {
        this.lists = lists;
      });

    this.listService.currentUuid$
      .pipe(takeUntil(this.destroy$))
      .subscribe((currentListUuid) => {
        this.currentListUuid = currentListUuid;
      });

    this.listService.getAll(); // 获取所有列表
  }

  ngOnDestroy(): void {
    this.destroy$.next();
  }

  openAddListModal(): void {
    this.addListModalVisible = true;
    setTimeout(() => this.listInput.nativeElement.focus());
  }

  closeAddListModal() {
    this.addListModalVisible = false;
  }

  add(title: string) {
    title = title.trim();
    if (!title) {
      this.message.error('请输入列表标题');
      return;
    }
    this.listService.add(title);
    this.addListModalVisible = false;
  }

  contextMenu($event: MouseEvent, template: TemplateRef<void>, uuid: string): void {
    this.dropdown = this.dropdownService.create($event, template); // 创建下拉菜单
    this.contextListUuid = uuid; // 上下文列表ID
  }

  close() {
    this.dropdown.close();
  }

  openRenameListModal() {
    this.renameListModalVisible = true;
    setTimeout(() => this.listRenameInput.nativeElement.focus());
  }

  closeRenameListModal() {
    this.renameListModalVisible = false;
  }

  rename(title: string) {
    this.listService.rename(this.contextListUuid, title);
    this.renameListModalVisible = false;
  }

  delete() {
    const uuid = this.contextListUuid;
    this.modal.confirm({
      nzTitle: '确认删除列表',
      nzContent: '改操作会导致该列表下的所有待办事项被删除',
      nzOnOk: () => {
        new Promise((res, rej) => {
          this.listService.delete(uuid);
          this.todoService.deleteInList(uuid);

          res();
        }).catch(() => this.message.error('删除列表失败'));
      }
    });
  }
}
